<script setup lang="ts">
import { onMounted } from 'vue';
import { getCurrentInstance } from '@tarojs/taro';
import { IconFont as NutIconIconFont } from '@nutui/icons-vue-taro';
import { formatTimestampStr } from '/@/utils/time';
import { APP_KNOWLEDGE_DETAIL_QUERY } from '/@/api/modules/base/knowledge';
import { state } from './state';

/**
 * @description 当前路由信息
 */
const params = getCurrentInstance().router?.params as {
  id: string;
};

onMounted(() => {
  /**
   * 文章详情页面查询
   * id: 文章id
   */
  APP_KNOWLEDGE_DETAIL_QUERY({ id: params.id }).then((res) => {
    state.richTextContent = res.knowledgeDto.richTextContent;
    state.baseTitle = res.knowledgeDto.baseTitle;
    state.createTime = res.knowledgeDto.createTime;
    state.viewNumber = res.knowledgeDto.viewNumber;
  });
});
</script>
<template>
  <view class="knowledge-detail app-page--1">
    <app-navbar title="文章详情" />
    <scroll-view class="app-page__wrapper" :scroll-y="true" :lower-threshold="100">
      <view class="knowledge-detail__wrapper">
        <view class="knowledge-detail__title"> {{ state.baseTitle }} </view>
        <view class="knowledge-detail__detail">
          <view class="knowledge-detail__time">
            {{ formatTimestampStr(state.createTime, 'YYYY-MM-DD') }}
          </view>
          <view class="knowledge-detail--right">
            <nut-icon-icon-font name="message" /><span>{{ state.viewNumber }}</span>
          </view>
        </view>
        <view v-html="state.richTextContent"></view>
      </view>
    </scroll-view>
  </view>
</template>
<style lang="scss">
@import './index.scss';
</style>
